<script lang="ts" setup>
import { IWebsite } from '@/api/system/type';
import { useSystemStore } from '@/hooks/store';

const systemStore = useSystemStore();
defineOptions({
  name: 'CzIcp'
});
const website = ref<IWebsite.Data>({} as IWebsite.Data);

const websiteInfo = () => {
  systemStore.getWebsite().then(res => {
    website.value = res;
  });
};
onMounted(() => {
  websiteInfo();
});
</script>

<template>
  <footer>
    <div class="w-100% p-t-25px p-b-25px text-center cz-icp">
      <div>
        <i class="bi bi-envelope" />
        2429120006@qq.com
      </div>
      <div>
        <a
          href="https://beian.miit.gov.cn"
          style="color: #5c6b77"
          target="_blank"
        >{{ website.websiteIcp?.split('//')[0] }}</a>
        &nbsp; {{ website.websiteIcp?.split('//')[1] || '' }}
      </div>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
.cz-icp {
  width: 100%;
  line-height: 2;
  position: relative;
  color: #eee;
  font-size: 14px;
  text-align: center;
  background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: Gradient 10s ease infinite;
  @keyframes Gradient {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}
</style>
